<template>
  <div class="app-container">
    <div class="box">
      <el-row>
        <el-col :span="2">
          <span style="width: 100%; height: 100%; line-height: 40px"> 服务器节点</span>
        </el-col>
        <el-col :span="4">
          <el-select v-model="sshHost" placeholder="请选择" @change="selectChange">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-col>
      </el-row>

      <br />
      <el-row>
        <el-col :span="11">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b><i class="iconfont icon-adq-cpu"></i> CPU</b>
              <el-button style="float: right; padding: 3px 0" type="text">
                <i v-if="isbool" class="el-icon-arrow-down" @click="isbool = false"></i>
                <i v-else class="el-icon-arrow-up" @click="isbool = true"></i>
              </el-button>
            </div>
            <div v-for="o in arr.CPU" :key="o" :class="['text', isbool ? 'updatabox' : 'downdatabox']">
              <template>
                <el-table :data="arr.CPU" style="width: 100%">
                  <el-table-column prop="us" label="用户空间占用CPU百分比"> </el-table-column>
                  <el-table-column prop="sy" label="内核空间占用CPU百分比"> </el-table-column>
                  <el-table-column prop="id" label="cpu使用率"> </el-table-column>
                  <el-table-column prop="wa" label="等待输入输出的CPU时间百分比"> </el-table-column>
                  <el-table-column prop="hi" label="硬件中断"> </el-table-column>
                  <el-table-column prop="si" label="软件中断"> </el-table-column>
                </el-table>
              </template>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12" :offset="1">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <b> <i class="iconfont icon-xingzhuang"></i> 内存</b>

              <el-button style="float: right; padding: 3px 0" type="text">
                <i v-if="isbool1" class="el-icon-arrow-down" @click="isbool1 = false"></i>
                <i v-else class="el-icon-arrow-up" @click="isbool1 = true"></i>
              </el-button>
            </div>
            <div v-for="o in arr.neic" :key="o" :class="['text', isbool1 ? 'updatabox' : 'downdatabox']">
              <template>
                <el-table :data="arr.neic" style="width: 100%">
                  <el-table-column prop="total" label="总计物理内存的大小"> </el-table-column>
                  <el-table-column prop="used" label="已使用内存;"> </el-table-column>
                  <el-table-column prop="freeUsageRate" label="使用率"> </el-table-column>
                  <el-table-column prop="free" label="可用内存"> </el-table-column>
                  <el-table-column prop="cached" label="磁盘缓存的大小"> </el-table-column>
                </el-table>
              </template>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br />

      <el-row>
        <el-col :span="24">
          <el-card class="box-card-1">
            <div slot="header" class="clearfix">
              <b> <i class="iconfont icon-window-n"></i> 服务器信息</b>
              <el-button style="float: right; padding: 3px 0" type="text">
                <i v-if="isbool2" class="el-icon-arrow-down" @click="isbool2 = false"></i>
                <i v-else class="el-icon-arrow-up" @click="isbool2 = true"></i>
              </el-button>
            </div>
            <div v-for="o in arr.fuwu" :key="o" :class="['text', isbool2 ? 'updatabox' : 'downdatabox']">
              <template>
                <el-table :data="arr.fuwu" style="width: 100%">
                  <el-table-column prop="hostname" label="服务器名称"> </el-table-column>
                  <el-table-column prop="ip" label="ip">
                    <template slot-scope="{ row }">
                      <span style="display: flex; flex-direction: row; align-items: center"
                        v-for="(v, i) in row.ip.split('\n')" :key="i">{{ v }}<br /> </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="redhatRelease" label="操作系统"> </el-table-column>
                  <el-table-column prop="runTime" label="运行时长"> </el-table-column>
                  <el-table-column prop="systemFramework" label="系统架构"> </el-table-column>
                </el-table>
              </template>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br />

      <el-row>
        <el-col :span="24">
          <el-card class="box-card-1">
            <div slot="header" class="clearfix">
              <b> <i class="iconfont icon-java"></i> Java虚拟机信息</b>
              <el-button style="float: right; padding: 3px 0" type="text">
                <i v-if="isbool3" class="el-icon-arrow-down" @click="isbool3 = false"></i>
                <i v-else class="el-icon-arrow-up" @click="isbool3 = true"></i>
              </el-button>
            </div>
            <div v-for="o in arr.Java" :key="o" :class="['text', isbool3 ? 'updatabox' : 'downdatabox']">
              <template>
                <el-table :data="arr.Java" style="width: 100%">
                  <el-table-column prop="javaName" label="Java名称"> </el-table-column>
                  <el-table-column prop="javaPath" label="java安装路径"> </el-table-column>
                  <el-table-column prop="javaVersion" label="Java版本"> </el-table-column>
                  <el-table-column prop="projectPath" label="项目路径"> </el-table-column>
                </el-table>
              </template>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-col :span="24">
          <el-card class="box-card-1">
            <div slot="header" class="clearfix">
              <b> <i class="iconfont icon-ecs-disk"></i> 磁盘状态</b>
              <el-button style="float: right; padding: 3px 0" type="text">
                <i v-if="isbool4" class="el-icon-arrow-down" @click="isbool4 = false"></i>
                <i v-else class="el-icon-arrow-up" @click="isbool4 = true"></i>
              </el-button>
            </div>
            <div :class="['text', isbool4 ? 'updatabox' : 'downdatabox']">
              <span class="table" style="white-space: space" v-for="(v, i) in arr.cepan">
                <pre> {{ v }} </pre>
              </span>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <br />
    </div>
  </div>
</template>

<script>
import { getconfigdata } from '@/api/resourceManagement/index'
import { fetchDictList } from '@/api/sys/dict.js'
export default {
  data() {
    return {
      isbool: '',
      isbool1: '',
      isbool2: '',
      isbool3: '',
      isbool4: '',
      loading: null,
      sshHost: '',
      options: [],
      searchObj: {
        page: '1',
        limit: '25',
        // todo: 测试
        gid: '1769573909036474369',
        //todo: 预发布
        // gid: '1770766058924281858',
        keyword: '',
      },
      arr: {
        CPU: [],
        neic: [],
        fuwu: [],
        Java: [],
        cepan: [],
      },
    }
  },

  mounted() {
    this.selectFun()
  },
  methods: {
    selectChange() {
      this.arr = {
        CPU: [],
        neic: [],
        fuwu: [],
        Java: [],
        cepan: [],
      }

      this.configFun()
    },
    selectFun() {
      fetchDictList(this.searchObj).then((res) => {
        if (res.data.code == 0) {
          this.options = res.data.data
          this.sshHost = this.options[0].value
          this.configFun()
        }
      })
    },
    configFun() {
      this.openFullScreen2()
      getconfigdata({ sshHost: this.sshHost }).then((res) => {
        this.arr.CPU.push(res.data.cpu)
        this.arr.neic.push(res.data.free)
        this.arr.fuwu.push(res.data.server)
        this.arr.Java.push(res.data.javaResult)
        this.arr.cepan = res.data.df.df.split('\n')

        this.loading.close()
      })
    },
    iconClick() {
      this.isbool = !this.isbool
    },
    deleteClick() {
      delete this.arr.CPU
    },
    openFullScreen2() {
      const dom = document.querySelector('.box')
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0,0.75)',
        target: dom,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.box-card-1 {
  width: 100%;
}

.box-card {
  width: 100%;
}

.el-table,
.table {
  font-size: 16px;
  font-weight: 400;
  font-family: '思源黑';
}

.updatabox {
  animation-name: iten;
  /* 动画名称 */
  animation-duration: 200ms;
  /* 动画运行时间 s（秒） ms（毫秒） */

  /* animation-delay: 200; */
  /* 动画什么时候开始 */

  /* animation-timing-function: ease; */

  /* animation-direction: normal; */
  /* 指定动画的播放方向，常见的值有normal(正常播放)、reverse(反向播放)和alternate(交替播放) */

  animation-fill-mode: forwards;
  /* 设置 animation-fill-mode 为 none，动画结束后元素会回到初始状态 可以接受none、forwards、backwards或者both */
}

.downdatabox {
  animation-name: downiten;
  /* 动画名称 */

  animation-duration: 200ms;
  /* 动画运行时间 s（秒） ms（毫秒） */

  /* animation-delay: 200; */
  /* 动画什么时候开始 */

  /* animation-timing-function: ease; */

  /* animation-direction: normal; */
  /* 指定动画的播放方向，常见的值有normal(正常播放)、reverse(反向播放)和alternate(交替播放) */

  animation-fill-mode: forwards;
  /* 设置 animation-fill-mode 为 none，动画结束后元素会回到初始状态 可以接受none、forwards、backwards或者both */
}

@keyframes iten {
  0% {
    height: 160px;
    overflow: auto;
  }

  25% {
    height: 120px;
    overflow: auto;
  }

  50% {
    height: 80px;
    overflow: auto;
  }

  75% {
    height:40px;
    overflow: auto;
  }

  100% {
    height: 0px;
    overflow: auto;
  }
}

@keyframes downiten {
  0% {
    height: 0px;
    overflow: auto;
  }

  25% {
    height: 40px;
    overflow: auto;
  }

  50% {
    height: 80px;
    overflow: auto;
  }

  75% {
    height: 120px;
    overflow: auto;
  }

  100% {
    height: 160px;
    overflow: auto;
  }
}
</style>
